Gutenberg Components: ServerSideRender

Sometimes, we will need to render dynamic content and we usually used shortcodes for that. But shortcodes did not show the output in the editor. With ServerSideRender component we can now also see what will happen on the front while using Gutenberg.

In my personal experience, when I want to convert a shortcode used to display dynamic content, I tend to go for this component.

This component can be found in the Gutenberg Repository.

When using this component, you will need to register the block with PHP and provide a callback that will be called to render it. This callback will be used to show it in the editor but also to show it on the front.

ServerSideRender Properties

When I started to use this component it was lacking a lot of features. At the moment of writing this tutorial, it is almost perfect. Here is the current list of available properties:

• attributes – Attributes that will be sent to the callback (optional),
• block – the block to be used for which we have a callback (required),
• className – the class to be added on the wrapper of the output (optional),
• urlQueryArgs – object where you can add other query arguments to the URL, this can be then intercepted with $_GET inside of the callback method (optional),
• EmptyResponsePlaceholder – by default, it will use the Placeholder component and say ‘Block rendered as empty’. You can pass your own component to render the empty response (optional),
• ErrorResponsePlaceholder – by default, it will use the Placeholder component to say that there was an error with the provided block (optional),
• LoadingResponsePlaceholder – by default, it will use the Placeholder component and show the Spinner component (optional).

There is still a missing feature to pass a callback when the response was successful. This might not be required for most of the time but when you want to create a slider or similar it might. In such scenarios you need to know when the content was rendered, so you can create the slider or similar. For now, you can only achieve that by calling the function after a delay (and hope that the delay will not be too short).

This feature is under development as far I have investigated so it could be available soon in the Gutenberg plugin (and hopefully really soon in WordPress core).

Also, when using this component, you don’t need to define a save method in the Block JavaScript code because it won’t use it to display HTML on the front.

How Gutenberg Uses it

Let’s see how Gutenberg itself is using this component. We will use the Archives block for example. You can check the edit.js on their repository.

They are passing the block inside of the ServerSideRender component to be core/archives. Since there are also two attributes that you can control when using that block, they are also passing those attributes inside.

The values of those attributes will be used inside of the callback registered through PHP. Let’s now see how this block is registered with PHP.

This file is in the same location as the edit.js and the file is called index.php. I will show you only a part of that file so you can see how this is used.

They are registering the block with all the attributes that they will use when rendering this block on the server side. On the parameter render_callback, the function render_block_core_archives is passed.

ServerSideRender in Simple Giveaways

I’ll now show you how I used it for my Simple Giveaways plugin. First, I display the ServerSideRender gutenberg component only if I have an ID.

To be able to use that block with ServerSideRender gutenberg component, I have to register that block as well with PHP.

Here, the callback get_giveaway will call the shortcode function giveasap_shortcode that is also used when register the shortcode. So we have actually using the same code for rendering both block and shortcode.

Conclusion

The ServerSideRender gutenberg component is a component that could help you convert shortcodes into blocks within hours (or sometimes even minutes if there are no attributes).

With the recent features (properties) added to it, it has become a really useful component to use and show dynamic content.

Become a Sponsor